import React, { Component } from 'react';

import { SelectButtonGroup, SelectButton, Scroll } from '../common-ui-parts';
import CommonConstants from '../../constants/CommonConstants';
import { SimulationItemConstant as SiC } from '../../constants/InputItemConstants';
import ModalDialog, { ButtonType } from '../common-ui-parts/ModalDialog';
import CommonUtils from '../../logics/CommonUtils';
import './ExerciseHabit.css';

class ExerciseHabit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalInputData: props.modalInputData,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ modalInputData: nextProps.modalInputData });
  }

  _setModalInputData(name, value) {
    this.setState({ modalInputData: { ...this.state.modalInputData, [name]: value } });
  }

  _callBack(isOk) {
    this.props.modalCallBack({ isOk: isOk, modalInputData: this.state.modalInputData });
  }

  render() {
    const { modalInputData } = this.state;

    const mets = CommonUtils.calcMets(modalInputData.exerciseTimeSitting, modalInputData.exerciseTimeStanding, modalInputData.exerciseTimeLaboring);

    return (
      <div className="exerciseHabit">
        {/* 運動習慣 */}
        <ModalDialog
          title={'運動習慣を見直す'}
          buttonType={ButtonType.CANCEL_OK}
          open={this.props.open}
          onAction={() => this._callBack(true)}
          onCancel={() => this._callBack(false)}
          className={'exerciseHabitModal'}
          contentClassName={'maxSize'}
        >
          <Scroll
            height={420}
            customStyle={CommonConstants.SIMULATION_MODAL_SCROLL.STYLE}
          >
            {/* 座っている時間 */}
            <dl className="content">
              <dt>{SiC.EXERCISE_TIME_SITTING.label}</dt>
              <dd>
                <SelectButtonGroup
                  name={SiC.EXERCISE_TIME_SITTING}
                  value={modalInputData[SiC.EXERCISE_TIME_SITTING]}
                  onChange={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.EXERCISE_TIME_SITTING.choices.map((choice, index) => (
                    <SelectButton key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectButtonGroup>
              </dd>
            </dl>
            {/* 立ったり歩いてる時間 */}
            <dl className="content">
              <dt>{SiC.EXERCISE_TIME_STANDING.label}</dt>
              <dd>
                <SelectButtonGroup
                  name={SiC.EXERCISE_TIME_STANDING}
                  value={modalInputData[SiC.EXERCISE_TIME_STANDING]}
                  onChange={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.EXERCISE_TIME_STANDING.choices.map((choice, index) => (
                    <SelectButton key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectButtonGroup>
              </dd>
            </dl>
            {/* 肉体労働やスポーツをする時間 */}
            <dl className="content">
              <dt>{SiC.EXERCISE_TIME_LABORING.label}</dt>
              <dd>
                <SelectButtonGroup
                  name={SiC.EXERCISE_TIME_LABORING}
                  value={modalInputData[SiC.EXERCISE_TIME_LABORING]}
                  onChange={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.EXERCISE_TIME_LABORING.choices.map((choice, index) => (
                    <SelectButton key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectButtonGroup>
              </dd>
            </dl>
          </Scroll>
          {/* 身体活動量 */}
          <dl className="modal-bottom">
            <dt>身体活動量(メッツ)</dt><dd>{mets.toFixed(2)}</dd>
          </dl>
        </ModalDialog>
      </div>
    );
  }
}

/*ExerciseHabit.propTypes = {
  open: React.PropTypes.bool.isRequired,
  modalInputData: React.PropTypes.object.isRequired,
  modalCallBack: React.PropTypes.func,
};*/

export default ExerciseHabit;
